<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当当网</title>
</head>
<style>
    div{
       margin: 0 auto;   
    }
    .main{
      width: 1100px;
    }
    .top{
        width: 100%;
        position:relative;
        display:inline-block;
    }
    .catlog{
        width: 100%;
        height: 30px;
    }
    .bai{
        height: 10px;
    }
    .show{
        height: 350px;
        border: 1px greenyellow solid;
    }
    .bottom{
        text-align: center;
        height: 30px;
    }
    .inl{
        display:inline-block;
        margin: 5px;
    }
    .top-bottom{
        float: right; 
        background-color: aqua; 
        position: absolute; 
        bottom: 0px;
        right: 0px; 
        border: 2px #000000 solid;
    }
    li{
        float: left;
        list-style: none;
        width: 55px;
        background: orange;
        font-size: 1.1em;
        text-align: center;
    }
</style>
<body>
    <div class="main"><!--整体的div区域-->
        <!--最上方div-->
        <div class="top">
            <div style="float: left;">
                <img src="image/logo.jpg" alt="">
            </div>
            <div class="top-bottom">
                <div class="inl">
                    <img src="image/icon_count.png";"/> 
                    尾品汇
                </div>
                <div class="inl">当当优品</div>
                <div class="inl">数字馆</div>
                <div class="inl">都看阅器</div>
            </div>
        </div>
        <!--空白行-->
        <div class="bai"></div>
        <!--列表div-->
        <div class="catlog">
            <li>首页</li>
            <li>图书</li>
            <li>音像</li>
            <li>童装</li>
            <li>服装</li>
            <li>鞋靴</li>
            <li>运动</li>   
            <li>箱包</li>
            <li>美妆</li>
            <li>珠宝</li>
            <li>家居</li>
            <li>食品</li>
            <li>酒</li>
            <li>手机</li>
            <li>数码</li>
            <li>电脑</li>
            <li>家电</li>
        </div>
        <div class="bai"></div>
        <!--图片展示-->
        <div class="im">
            <img src="image/banner.png" alt="">
        </div>
        <div class="bai"></div>
        <!--主要内容展示-->
        <div class="show">
            <div>
                <img src="image/bg_bang.gif" alt="">
            </div>
            <div style="display: inline-block; width: 100%;">
                <div style="display:inline-block; float: left;">
                    <div style="float: left;">
                        <img src="image/book-01.jpg" alt="">
                    </div>
                    <div style="float: right;">
                        <p style="color: blue;">偷影子的人</p>
                        <p>作者：[法] 马克·李维（Marc Levy）著</p>
                        <p>出版社：湖南文艺出版社</p>
                        <p>当当价：<font color = "red">￥17.90</font></p>
                        <p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，<br>
                            我童年时的小女孩，今日蜕变成了女人，一段青梅竹<br>
                            马的回忆，一个时间之神没有应允的愿望。一个老<br>
                            是受到班上同学欺负的瘦弱小男孩，因为拥有一种特殊<br>
                            能力而强大：他能“偷别人的影子”</p>
                    </div>
                </div>
                <div style="display: inline-block;">
                    <div >
                        <div style="float: left;">
                            <img src="image/book-02.jpg" alt="">
                        </div>
                        <div style="float: right;">
                            <span style="color: blue;">看见(央视知名记者、主持人柴静：十年个人<br>
                                成长的告白，中国社会变迁的备忘</span><br>
                            <span>作者：柴静 著</span><br>
                            <span>出版社：广西师范大学出版社</span><br>
                            <span>当当价：<font color = "red">￥29.40</font> <font color=“blue”>7.4折</font></span>
                        </div>
                    </div>
                    <div style="margin-top: 20px;">
                        <div style="float: left;">
                            <img src="image/book-03.jpg">
                        </div>
                        <div >
                            <span style="color: blue;">改变孩子先改变自己</span><br>
                            <span>作者：贾容韬 贾毅 著</span><br>
                            <span>出版社：作家出版社</span><br>
                            <span>当当价：<font color = "red">￥22.20</font> <font color=“blue”>7.4折</font></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bai"></div>
        <!--底部展示-->
        <div class="bottom">
            <span>Copyright(C) 当当网 2004-2017,All Rights Reserved</span>
            <img src="image/validate.gif" width="30px" height="30px">
            <span>京ICP证041189号|出版物经营许可证 新出发京批字第直0673号</span>
        </div>
    </div>
</body>
</html>